
import React from 'react';
import { createModalContainer } from '@/components/changeModal';
import {Button, message, Form, Select} from 'antd';
import { connect } from 'dva';
import styles from './modal.less';

const FormItem = Form.Item;
const Option = Select.Option;

@Form.create()
class AddCardComponent extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        isFetching: false,
        cardList: null
      }
  }
  componentWillMount() {
    window.Isoption = false;
  }
  componentDidMount() {
    window.Isoption = true;
  }

//取消
handleCancel =() => {
  this.props.cancel();
}

componentDidMount() {
    this.findCardList();
}

findCardList =() => {
    const { dispatch } = this.props;
    dispatch({
        type:'customerList/FindCardList',
        payload: {
            MemberId: this.props.param.MemberId,
        },
        callback: {
            success: res => {
                if(res.Code ===0) {
                    this.setState({
                        cardList: res.Data
                    })
                }
            },
            error: res => {
                message.error(res.Msg);
            }
        }
    })
}


handleSubmit =(e) => {
    const { dispatch } = this.props;
    this.setState({
        isFetching: true
    })
    e.preventDefault();
    this.props.form.validateFields(async (err, values) => {
        if(!err) {
            dispatch({
                type:'customerList/AddCard',
                payload: {
                    MemberIds: [this.props.param.MemberId],
                    CardId: values.CardId
                },
                callback: {
                    success: res => {
                        if(res.Code ===0) {
                            message.success('保存成功');
                            this.setState({
                                isFetching: false
                            }, () => {
                                this.props.ok();
                            })
                        }
                    },
                    error: res => {
                        this.setState({
                            isFetching: false
                        });
                        message.error(res.Msg)
                    }
                }
            })
        } else {
            this.setState({
                isFetching: false
            })
        }
    })
}

    render() {
      const {getFieldDecorator} = this.props.form;
      const { cardList } = this.state;
      const formItemLayout = {
        labelCol: {
            span: 10,
          },
          wrapperCol: {
            span: 12,
          },
      }
        return (
          <Form onSubmit={this.handleSubmit} style={{marginTop: 24}}>
            <FormItem {...formItemLayout} label="会员等级卡">
              {getFieldDecorator('CardId', {
                initialValue: cardList &&cardList.CardId ? cardList &&cardList.CardId: '',
                rules: [{ required: true, message: '请选择会员卡' }],
              })(
                <Select>
                  {cardList && cardList.Data && cardList.Data.map((item, index) => {
                      return <Option value={item.Id} key={index}>{item.Name}</Option>
                  })}
                </Select>
              )}
            </FormItem>
            <FormItem className={styles.footBtn}>
                <Button onClick={this.handleCancel} style={{marginRight: 16}}>
                    取消
                </Button>
                <Button
                    type="primary"
                    htmlType="submit"
                    loading={this.state.isFetching}
                >
                    保存
                </Button>
            </FormItem>
      </Form>
        )
    }
}

const AddCard = createModalContainer(
    connect(({customerList, global, loading}) => ({
        memberInfo: customerList.memberInfo
    }))(AddCardComponent),
    true,
    true
);

export default AddCard;
